<template>
  <div>
    <van-nav-bar title="订单详情" left-arrow @click-left="GOback" fixed :border="false" placeholder />
    <ul class="order_list_ul" v-if="$store.state.OrdersData.length">
      <li class="order_list_li" v-for="(item,index) in $store.state.OrdersData" :key="index">
        <img :src="'//elm.cangdu.org/img/'+item.restaurant_image_url" alt="">
        <section class="order_item_right">
          <section @click="Orderdetails(item.id,item.user_id,index)">
            <header class="order_item_right_header">
              <section class="order_header">
                <h4>
                  <span class="ellipsis">{{item.restaurant_name}}</span>
                  <van-icon name="arrow" color="#bbbbbb" />
                </h4>
                <p class="order_time">{{item.formatted_created_at}}</p>
              </section>
              <p class="order_status">{{item.status_bar.title}}</p>
            </header>
            <section class="order_basket">
              <p class="order_name ellipsis">{{item.basket.group[0][0].name}}</p>
              <p class="order_amount">¥{{item.total_amount}}.00</p>
            </section>
          </section>
          <div class="order_again" @click="Details(item.restaurant_id)">
            <span class="buy_again">再来一单</span>
          </div>
        </section>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    GOback() {
      this.$router.go(-1)
    },
    Details(id) {
      window.sessionStorage.setItem('shopid', id)
      this.$router.push('/Details')
    },
    // 发起订单详情请求
    async Orderdetails(id, user_id, index) {
      this.$store.commit('Getindex', index)
      const { data: res } = await this.reques.get(`bos/v1/users/${user_id}/orders/${id}/snapshot`)
      this.$router.push('/order/orderDetail')
    }
  },
  mounted() {
    this.$store.dispatch('GetOrders', window.sessionStorage.getItem('user_id'))
  }
}
</script>

<style lang="less" scoped>
.order_list_li {
  background-color: #fff;
  display: flex;
  margin-bottom: 0.5rem;
  padding: 0.6rem 0.6rem 0;
  img {
    width: 1.9rem;
    height: 1.9rem;
    margin-right: 0.4rem;
  }
  .order_item_right {
    flex: 5;
    section {
      .order_item_right_header {
        border-bottom: 0.025rem solid #f5f5f5;
        padding-bottom: 0.3rem;
        display: flex;
        justify-content: space-between;
        .order_header {
          h4 {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-size: 0.7rem;
            color: #333;
            line-height: 1rem;
            font-weight: 400;
          }
          .order_time {
            font-size: 0.55rem;
            color: #999;
            line-height: 0.8rem;
          }
        }
        .order_status {
          margin-right: 0.1rem;
          font-size: 0.6rem;
          color: #333;
        }
      }
      .order_basket {
        display: flex;
        justify-content: space-between;
        line-height: 2rem;
        border-bottom: 0.025rem solid #f5f5f5;
        .order_name {
          font-size: 0.6rem;
          color: #666;
        }
        .order_amount {
          font-size: 0.6rem;
          color: #f60;
          font-weight: 700;
          margin-right: 0.25rem;
        }
      }
    }
  }
}
.order_again {
  text-align: right;
  line-height: 1.6rem;

  .buy_again {
    font-size: 0.55rem;
    color: #3190e8;
    border: 0.025rem solid #3190e8;
    padding: 0.1rem 0.2rem;
    border-radius: 0.15rem;
  }
}
</style>